<template>
  <div class="index">
    <div class="left" v-for="(item, index) in indexList" :key="index">
      <div class="button" @click="handleClick(item)">{{item}}</div>
    </div>

  </div>
</template>

<script>
export default {
  name: "MapIndex",
  props: {
    indexList: {
      type: Array,
      default: () => [],
    },
  },
  methods:{
    handleClick(item){
      if(item === '主接线图'){
        this.$router.push('/mainPage');
      }else{
        this.$router.push('/GongYongCeKongFenTu');
      }
    }
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.index {
    width: 220px;
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      .button {
        text-align: center;
        width: 180px;
        font-size: 22px;
        padding: 10px;
        margin-left: 10px;
        background-color: #c6d1dd;
        cursor: pointer;
        &:hover {
          color: #fff;
        }
      }
    }
  }
</style>
